<style type="text/css">
    #suggest{background: #BAB1B4; border: 1px solid #9E9699;
        color: #fff; width: 100%; height: 100px; overflow-y: scroll;
    }
    #multi_del{min-height: 300px; margin: 0 auto;}
    #single_del{min-height: 300px; width: 430px; margin: 0 auto;}
    #list{width: 550px; margin: 0 auto; background: #fff; height: 350px; overflow-y: scroll;}
</style>

<script type="text/javascript">

    $(document).ready(function() {
        $('#multi_del').hide();
        $('#txt_mamh').focus();
    });
    
    function single_del(value)
    {
        if($('#txt_mamh').val() != '')
        {
            var r = confirm("Bạn có muốn xóa môn học "+value+"?");
            if(r == false){
                return false;
            }
            else{
                $("#result").html("<center><img src='../image/source/loading.gif' /></center>");
                $.ajax({
                    url: 'quanlymh/ajax_del.php',
                    type: 'POST', data: "action=delete&mamh="+value,
                    success: function(result){
                        $("#result").html(result);
                        $("#txt_mamh").val("");
                        $('#suggest').html("");
                    },
                    error: function()
                    {
                        $('#result').html('Lỗi kết nối');
                    }
                });
            }    
        }
        else alert("Mã MH không được để trống.")
    }
    
    function multi_del()
    {
        var checked = new Array();
        $("input[name='chk_mh[]']:checked").each(function() {
            checked.push($(this).val());
        });
        if(checked.length > 0)
        {
            var r = confirm("Bạn có muốn xóa những môn học này?");
            if(r == false){
                return false;
            }
            else
            {            
                $.ajax({
                    url: 'quanlymh/ajax_del.php',
                    type: "POST", 
                    data: {
                        action: 'delete',
                        array: checked,
                    },
                    success: function(result){ 
                        reset();               
                    }
                });
                return false;
            }   
        }
        else alert("Vui lòng chọn môn học để xóa!");
        
    }
    
    function suggest_mamh(value)
    {
        if($('#txt_mamh').val() != '')
        {
            $.ajax({
                url: 'quanlymh/ajax_del.php',
                type: 'POST', data: "action=suggest&mamh="+value,
                success: function(result){
                    $("#suggest").html(result);
                }
            });
        }
        else $('#suggest').html("");            
    }
    
    function reset()
    {
        $("#txt_mamh").val(""); $("#txt_mamh").focus();
        $('#suggest').html(""); $('#result').html("");
        $.ajax({
            url: 'quanlymh/ajax_del.php',
            type: 'POST', data: "action=load_list",
            success: function(result){
                $("#list").html(result);
            } 
        });
    }
</script>

<div id="function">
    XÓA MÔN HỌC
</div>

<div id="left">
    <a><div id="button_single" class="button" onclick="$('#single_del').show('slow'); $('#multi_del').hide(); reset()">
        Xóa một MH</div></a>
    <a><div id="button_multi" class="button" onclick="$('#single_del').hide(); $('#multi_del').show('slow'); reset()">
        Xóa nhiều MH</div></a>
</div>

<div id="loading"></div>

<div id="function_content">

    <div id="single_del">
        <table>
        <form action="">
            <tr>
                <td>Nhập mã môn học cần xóa:</td>
                <td><input type="text" name="chon_mamh" onkeyup="suggest_mamh($(this).val())" id="txt_mamh" /></td>
            </tr>
        </form> 
            
            <tr>
                <td colspan="2"><div id="suggest"></div></td>
                <td><button onclick="single_del($('#txt_mamh').val())">Xóa</button></td>
            </tr>
            
            <tr>
                <td><div id="result"></div></td>
            </tr>            
        </table>
    </div>
    
    <div id="multi_del">
        <div id="list">
        
        </div>
        
        <center><button onclick="multi_del()">Xóa</button></center>
    </div>
</div>